<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :back="true" @gobackTriser="goBack">
      <slot>
        <span
          :class="[
            'startStatus',
            {
              greenColor: statusDesc === '审核通过',
              redColor: statusDesc === '已驳回',
              yellowColor: statusDesc === '待审核',
            },
          ]"
          >{{ statusDesc }}</span
        >
      </slot>
    </topTitle>
    <div class="mainCon">
      <div class="caseDetailBox">
        <!-- 详情start -->
        <template>
          <el-row>
            <el-col :span="24" class="subTitleBox">
              <div class="secondaryTitle secondaryTitleTheme">案件信息</div>
              <el-link
                type="primary"
                icon="icon iconfont iconbianji"
                class="editLink"
                @click="editInfo"
                v-if="
                  isEdit &&
                  (statusDesc === '待审核' || statusDesc === '已驳回') &&
                  !isPolice
                "
                ><span class="opetareText">编辑案件信息</span></el-link
              >
            </el-col>
          </el-row>
        </template>
        <el-form
          :model="formData"
          ref="formData"
          label-width="130px"
          class="demo-formData"
          v-if="isEdit"
        >
          <table cellspacing="0" cellpadding="0" class="detailTable">
            <tbody>
              <tr>
                <td class="title">案件编号</td>
                <td>{{ formData.caseNo || '--' }}</td>
                <td class="title">案件名称</td>
                <td>{{ formData.name || '--' }}</td>
              </tr>
              <tr>
                <td class="title">经办人员</td>
                <td>{{ formData.handler || '--' }}</td>
                <td class="title">联系方式</td>
                <td>{{ formData.contactInformation || '--' }}</td>
              </tr>
              <tr>
                <td class="title">案件材料</td>
                <td colspan="3">
                  <el-link type="primary" @click="View">查看附件</el-link>
                  <contractEnclosureDialog
                    v-if="uploadContract"
                    dialogTitle="案件材料附件"
                    :tableData="managerUpLoadFile"
                    @closeDialog="hiddenDialog"
                  >
                  </contractEnclosureDialog>
                </td>
              </tr>
            </tbody>
          </table>
          <el-row
            style="text-align: center; margin-top: 20px"
            v-if="statusDesc === '待审核' && isPolice"
          >
            <el-col :span="24">
              <el-button
                class="commonBut saveBtn"
                type="primary"
                v-sdc
                @click="toPass"
                :loading="isPassLoading"
                v-if="statusDesc === '待审核' && isPolice"
                >审核通过</el-button
              >
              <el-button
                class="commonBut saveBtn funComBut"
                style="width: 150px; background: #3e5265; border-color: #3e5265"
                @click="reject"
                :loading="loadingReject"
                v-if="statusDesc === '待审核' && isPolice"
                >驳回</el-button
              >
            </el-col>
          </el-row>
        </el-form>

        <!-- 详情end -->
        <!-- 编辑 start-->
        <div class="editBox" v-else>
          <div class="titleEdit fontColorTheme">编辑查实情况</div>
          <el-form
            :model="formDataEdit"
            :rules="formRules"
            ref="formDataEdit"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="案件编号：" label-width="135px">
                        <span>{{ formDataEdit.caseNo }}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="案件名称：" label-width="135px">
                        <span>{{ formDataEdit.name }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        prop="handler"
                        label="经办人员："
                        label-width="135px"
                      >
                        <el-input
                          v-model.trim="formDataEdit.handler"
                          placeholder="请输入经办人员姓名"
                          class="proInputWidth"
                          clearable
                          @blur="filterField.handler = changeValue($event)"
                          maxlength="60"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        prop="contactInformation"
                        label="联系方式："
                        label-width="135px"
                      >
                        <el-input
                          v-model.trim="formDataEdit.contactInformation"
                          placeholder="请输入项目经理手机号"
                          class="proInputWidth"
                          clearable
                          @blur="
                            filterField.contactInformation = changeValue($event)
                          "
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label="案件材料："
                        label-width="135px"
                        prop="managerUpLoadFile"
                      >
                        <el-button class="uploadImg" @click="uploadView"
                          >上传/查看</el-button
                        >
                        <span class="uploadImgState">
                          <span
                            >请上传案件材料，附件格式支持持
                            doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf，最多上传20个附件</span
                          >
                        </span>
                      </el-form-item>
                      <contractEnclosureDialog
                        v-if="uploadContractTwo"
                        dialogTitle="附件"
                        :tableData="managerUpLoadFile"
                        @closeDialog="hiddenDialogTwo"
                        :showDelete="showDelete"
                        @deleteHandle="deleteHandle"
                      >
                        <uploadAnnex
                          :limitationFactor="limitationFactor"
                          @getFile="getFile"
                          style="margin-bottom: 20px"
                          :upLoadFile="managerUpLoadFile"
                        />
                      </contractEnclosureDialog>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <el-row style="text-align: center; margin-top: 20px">
              <el-col :span="24">
                <el-button
                  class="commonBut saveBtn"
                  type="primary"
                  v-sdc
                  @click="save"
                  :loading="isSaveLoading"
                  v-if="statusDesc === '待审核'"
                  >保存</el-button
                >
                <el-button
                  class="commonBut saveBtn"
                  type="primary"
                  v-sdc
                  @click="Resubmit"
                  v-if="statusDesc === '已驳回'"
                  >保存,并再次提交</el-button
                >
                <el-button size="medium" class="cancelBtn" @click="goDetail()"
                  >取消</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 编辑 end-->
      </div>
      <div class="spacing"></div>
      <div class="caseDetailBox">
        <el-row>
          <el-col :span="24" class="subTitleBox">
            <div class="secondaryTitle secondaryTitleTheme">办理进展记录</div>
          </el-col>
        </el-row>
        <div class="infoList">
          <div>
            <el-steps direction="vertical" v-if="appealProgressList.length > 0">
              <el-step
                v-for="item in appealProgressList"
                :key="item.id"
                :title="`操作时间：${item.createTime}  操作人：${item.nickName}`"
              >
                <div slot="description">
                  <span v-if="item.operateTypeDesc == '驳回'"
                    >操作：已{{ item.operateTypeDesc }}</span
                  >
                  <span v-if="item.operateTypeDesc == '添加'"
                    >操作：{{ item.operateTypeDesc }}案件</span
                  >
                  <span v-if="!['驳回', '添加'].includes(item.operateTypeDesc)"
                    >操作：{{ item.operateTypeDesc }}</span
                  >
                  <br />
                  <span v-if="item.operateTypeDesc == '驳回'"
                    >驳回原因：{{ item.remark || '--' }}</span
                  >
                  <span v-if="item.operateTypeDesc == '再次提交'"
                    >提交说明：{{ item.remark || '--' }}</span
                  >
                </div>
              </el-step>
            </el-steps>
            <span v-else class="noDataTip">暂无进展记录</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 再次提交弹框 start -->
    <el-dialog
      title="再次提交"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="handleClose"
      custom-class="brand-dialog-min-width"
      width="600px"
      :modal-append-to-body="false"
    >
      <el-form
        :model="formDataAgain"
        label-width="80px"
        :rules="formRulesAgain"
        ref="formDataAgain"
      >
        <el-form-item label="提交说明" class="row-padding-bottom" prop="remark">
          <el-input
            type="textarea"
            v-model="formDataAgain.remark"
            @blur="formDataAgain.remark = changeValue($event)"
            maxlength="200"
            show-word-limit
            placeholder="请填写提交说明，例：根据驳回原因，已上传新资料"
            :rows="5"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="againSave"
          class="save"
          :loading="isSaveLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 再次提交弹框 end -->
    <!-- 驳回 start -->
    <el-dialog
      title="驳回"
      :visible.sync="formVisibleReject"
      :close-on-click-modal="false"
      @close="handleCloseReject"
      custom-class="brand-dialog-min-width"
      width="600px"
      :modal-append-to-body="false"
    >
      <el-form
        :model="formDataReject"
        label-width="80px"
        :rules="formRulesReject"
        ref="formDataReject"
      >
        <el-form-item label="驳回原因" class="row-padding-bottom" prop="remark">
          <el-input
            type="textarea"
            v-model="formDataReject.remark"
            @blur="formDataReject.remark = changeValue($event)"
            maxlength="200"
            show-word-limit
            placeholder="请填写驳回原因"
            :rows="5"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCloseReject" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="rejectPass"
          class="save"
          :loading="isRejectLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 驳回 end -->
  </div>
</template>
<script>
export default {
  name: 'caseTransferDetail',
  data() {
    const contactInformation = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value == '' || value == null) {
        callback(new Error('请输入联系方式'))
      } else if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var validateManagerUpLoadFile = (rele, value, callback) => {
      if (this.managerUpLoadFile.length < 1) {
        return callback(new Error('必须上传案件材料'))
      } else {
        callback()
      }
    }
    return {
      titleText: '案件详情',
      status: '已审核',
      formData: {
        caseNo: '123',
        name: '456',
        handler: '789',
        contactInformation: '1205',
      },
      formDataEdit: {
        caseNo: '123',
        name: '456',
        handler: '789',
        contactInformation: '1205',
      },
      isEdit: true,
      appealProgressList: [],
      formRules: {
        handler: [
          {
            required: true,
            message: '请输入经办人员',
            trigger: 'blur',
          },
        ],
        contactInformation: [
          {
            required: true,
            validator: contactInformation,
            trigger: 'blur',
          },
        ],
        managerUpLoadFile: [
          {
            required: true,
            validator: validateManagerUpLoadFile,
            trigger: 'change',
          },
        ],
      },

      uploadContractTwo: false,
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 20, //自定义上传文件最大数量设置
        fileSize: 50, //自定义上传文件最大设置
        formatType: 'typeSeven', //自定义上传格式校验类型
        messagetip:
          '要求格式为doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf格式，附件大小不超过50M', //自定义报错提示语
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传案件材料，附件格式支持持 doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf，最多上传20个附件', //自定义上传文件提示
        uploadBtnType: 'typeTwo', //自定义上传按钮类型
        messageFileSizetip: '最多能上传50M以内的附件',
        UploadType: 'typeTwo',
      },
      managerUpLoadFile: [],
      showDelete: true,
      uploadContract: false, //查看附件弹框
      formVisible: false, //再次提交弹框
      formRulesAgain: {
        remark: [
          {
            required: true,
            message: '请填写提交说明',
            trigger: 'blur',
          },
        ],
      },
      formDataAgain: {
        remark: '',
      },
      formVisibleReject: false,
      formRulesReject: {
        remark: [
          {
            required: true,
            message: '请填写提交说明',
            trigger: 'blur',
          },
        ],
      },
      formDataReject: {
        remark: '',
      },
      isSaveLoading: false, //保存loadind
      isPassLoading: false, //审核通过loading
      isRejectLoading: false, //驳回loading
      objData: {},
      id: '',
      statusDesc: '',
      isPolice: false,
    }
  },
  async created() {
    await this.getUserType()
    this.uploadList()
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-r/rightscase/expand/findbyid',
        data: { id: this.id },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.formData = res.data.result
            this.formDataEdit = res.data.result
            this.status = res.data.result.status
            this.statusDesc = res.data.result.statusDesc
            this.appealProgressList = res.data.result.caseProgressList
          }
        })
        .catch((resp) => {})
    },
    getUserType() {
      this.axios({
        method: 'get',
        url: 'api-u/users/current',
      })
        .then((res) => {
          let arr = res.data.sysRoles.filter((item) => item.code == 'POLICE')
          if (arr.length) {
            this.isPolice = true
          }
        })
        .catch((resp) => {})
    },
    goBack() {
      this.$router.push('/home/kmCaseHandle/caseListJc')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/kmCaseHandle/caseListJc',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    editInfo() {
      this.isEdit = false
    },
    goDetail() {
      this.isEdit = true
    },
    // 查看、上传
    uploadView() {
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
    getFile(val) {
      this.saveUpload([val])
    },
    //保存附件
    saveUpload(uploadImg) {
      var data = {
        caseFiles: JSON.stringify(uploadImg),
        id: this.id,
      }
      this.axios({
        method: 'post',
        url: '/api-r/rightscase/expand/addFiles',
        data: data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '附件上传成功',
            })
            this.uploadList()
          } else {
            this.$message({
              type: 'error',
              message: '保存失败',
            })
          }
        })
        .catch((error) => {})
    },
    // 附件列表
    uploadList() {
      var data = {
        associatedName: 'T_CS_RIGHTS_CASE',
        associatedId: this.id,
      }
      this.axios({
        method: 'post',
        url: '/api-f/files/list',
        data: data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.managerUpLoadFile = response.data.result
              ? response.data.result
              : []
          } else {
            this.$message({
              type: 'error',
              message: '保存失败',
            })
          }
        })
        .catch((error) => {})
    },
    // 删除
    deleteHandle(id) {
      // this.managerUpLoadFile.forEach(function(item, index, arr) {
      //     if(item.id == id) {
      //         arr.splice(index,1);
      //     }
      // });
      let that = this
      this.$confirm('此操作将永久删除该附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios({
            method: 'post',
            url: '/api-f/files/deleteById',
            data: {
              id: id,
            },
          })
            .then((response) => {
              if (!response.data.hasError) {
                that.$message({
                  message: '删除成功',
                  type: 'success',
                })

                that.uploadList()
              } else {
                this.$message({
                  message: resp.data.errorMsg,
                  type: 'error',
                })
              }
            })
            .catch((error) => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 查看
    View() {
      this.uploadContract = true
      this.uploadList()
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    // 保存并再次提交
    Resubmit() {
      this.$refs.formDataEdit.validate((valid) => {
        if (valid) {
          this.formVisible = true
        } else {
          return false
        }
      })
    },
    againSave() {
      this.$refs.formDataAgain.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.saveToDetail('again')
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.formVisible = false
      this.$refs['formDataAgain'].resetFields()
    },
    // 驳回 start
    reject() {
      this.formVisibleReject = true
    },
    rejectPass() {
      this.$refs.formDataReject.validate((valid) => {
        if (valid) {
          this.pass('2')
        } else {
          return false
        }
      })
    },
    handleCloseReject() {
      this.formVisibleReject = false
      this.$refs['formDataReject'].resetFields()
    },
    // 驳回 end
    formVisibleReject() {
      this.loadingReject = false
      this.formVisibleReject = false
      this.$refs['formDataReject'].resetFields()
    },
    // 审核
    toPass() {
      this.$confirm('确定该案件材料通过审核？', '审核通过', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.pass('1')
        })
        .catch(() => {
          this.isPassLoading = false
        })
    },
    // 审核/驳回
    pass(type) {
      var remark
      if (type == '1') {
        this.isPassLoading = true
        remark = this.formDataAgain.remark ? this.formDataAgain.remark : ''
      } else {
        this.isRejectLoading = true
        remark = this.formDataReject.remark ? this.formDataReject.remark : ''
      }
      this.axios({
        method: 'post',
        url: '/api-r/rightscase/expand/approved',
        data: {
          id: this.id,
          status: type,
          remark: remark,
        },
      })
        .then((response) => {
          if (type == '1') {
            this.isPassLoading = false
          } else {
            this.isRejectLoading = false
          }
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: response.data.msg,
            })
            if (type == '2') {
              this.formVisibleReject = false
            }
            this.getDetail()
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          if (type == '1') {
            this.isPassLoading = false
          } else {
            this.isRejectLoading = false
          }
        })
    },
    save(type) {
      this.$refs.formDataEdit.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.saveToDetail('')
        } else {
          return false
        }
      })
    },
    // 保存
    saveToDetail(type) {
      this.axios({
        method: 'post',
        url: '/api-r/rightscase/expand/modify',
        data: {
          id: this.id,
          handler: this.formDataEdit.handler,
          contactInformation: this.formDataEdit.contactInformation,
          status: this.status,
          remark: this.formDataAgain.remark ? this.formDataAgain.remark : '',
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: response.data.msg,
            })
            if (type == 'again') {
              this.formVisible = false
            }
            this.getDetail()
            this.isEdit = true
          } else {
            this.$message({
              type: 'error',
              message: '保存失败',
            })
          }
        })
        .catch((error) => {
          this.isSaveLoading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font-size: 18px;
  font-weight: bold;
  line-height: 67px;
  .titleStyle {
    color: #333;
    font-size: 22px;
    .el-icon-caret-bottom {
      color: #71818e;
    }
  }
  /* 开工状态 */
  .startStatus {
    display: inline-block;
    width: 60px;
    height: 20px;
    line-height: 20px;
    vertical-align: text-top;
    margin-left: 10px;
    background: #009588;
    color: #fff;
    text-align: center;
    font-size: 12px;
  }
}
.mainCon {
  padding: 0;
  height: calc(100% - 67px);
  .caseDetailBox {
    padding: 0 24px 24px;
  }
  .lineDiv {
    height: 20px;
    background-color: #f5f7fa;
  }
  //办理进展详情
  .titleInfoRecord {
    position: relative;
    height: 37px;
    line-height: 18px;
    padding: 0 0 16px 20px;
    font-size: 16px;
    margin-top: 24px;
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 24px;
      left: 0;
      top: 0px;
      background: #009588;
    }
  }
  .infoList {
    background-color: #f8f9fb;
    padding: 20px;
  }
  .titleInfo {
    position: relative;
    padding-left: 20px;
    height: 37px;
    font-size: 16px;
    .titleInfoEdit {
      position: absolute;
      top: 0;
      right: 10px;
    }
    &::before {
      position: absolute;
      content: '';
      width: 4px;
      height: 24px;
      left: 0;
      top: 0;
      background: #009588;
    }
  }
}
form.el-form.demo-formData {
  width: 100%;
  display: inline-block;
  text-align: left;
  .a_link {
    color: #00a0e9;
  }
}
.el-main .el-form-item {
  margin-bottom: 20px;
}
.proInputWidth {
  width: 65%;
}
.editBox {
  padding: 20px;
  background: #f8f9fb;
  border: 1px solid #dcdfe6;
  .titleEdit {
    font-size: 14px;
    color: #265faa;
    font-weight: 700;
    margin-bottom: 8px;
  }
}

// 修改步骤条样式
/deep/ .el-steps {
  .el-step__icon.is-text {
    border: none;
    background-color: #eee;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
  .el-step__icon-inner {
    display: none;
  }
  .el-step__line {
    background-color: #eee;
    left: 4px !important;
    top: 9px !important;
    bottom: -8px !important;
  }
  .el-step__title {
    font-size: 12px;
    color: #999;
  }
  .el-step__description {
    margin-bottom: 15px;
    font-size: 14px;
    color: #444;
  }
}
.uploadImg {
  height: 36px;
  color: #009588;
  border: 1px solid #009588;
  line-height: 10px;
}
.uploadImgState {
  font-size: 14px;
  color: #999999;
  margin-left: 12px;
}
.greenColor {
  background: #009588 !important;
}
.yellowColor {
  background: #ffc100 !important;
}
.redColor {
  background: #d9544f !important;
}
.subTitleBox {
  padding: 24px;
  padding-left: 0;
  position: relative;
  .editLink {
    float: right;
    margin-top: -20px;
  }
}
</style>
